<template>
  <div>
    <h1>我是根组件</h1>
    <!-- 下面这些都是element-ui提供的全局组件！！！
       type:决定按钮的类型
       size:设置按钮大小
       icon:添加图标
     -->
    <el-button type="primary" size="mini">主要按钮</el-button>
    <el-button type="info" size="default" icon="el-icon-eleme"
      >信息按钮</el-button
    >
    <el-button type="success" size="default" icon="el-icon-info"
      >成功按钮</el-button
    >
    <el-button type="danger" size="default" icon="el-icon-plus"
      >危险按钮</el-button
    >
    <el-button type="warning" size="default" icon="el-icon-edit"
      >警告按钮</el-button
    >
    <h1>栅格系统----响应式布局</h1>
    <!--
      element-ui:row col 栅格系统可以支持响应式布局  24栏
    -->
    <el-row :gutter="100">
      <el-col :span="20" :xs="24">中国</el-col>
      <el-col :span="4">日本</el-col>
    </el-row>

    <h1>轮播图组件</h1>
    <div class="block">
      <span class="demonstration">默认 Hover 指示器触发</span>
      <el-carousel height="150px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
};
</script>

<style scoped>
</style>
